<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html报告</title>
    <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .chart-container {
            height: 500px;  /* 增加高度确保图表显示 */
            width: 100%;
            margin: 2rem 0;
        }
        .footer {
            text-align: center;
            padding: 2rem;
            color: #6c757d;
            border-top: 1px solid #dee2e6;
            margin-top: 2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="text-3xl font-bold mb-2">html报告</h1>
            <p class="text-xl opacity-90">html报告</p>
            <p class="mt-2 opacity-75">生成时间: 2025年12月02日 17:13:42</p>
        </header>

        <main>
            <section class="card">
                <h2 class="text-2xl font-semibold mb-4">数据概览</h2>
                <p class="mb-4">本报告基于 8 条数据记录生成，以下是详细数据内容：</p>
                
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white border border-gray-300">
                <thead>
                    <tr class="bg-gray-100">
                        <th class='px-4 py-2'>基金名称</th><th class='px-4 py-2'>净值</th><th class='px-4 py-2'>规模(亿元)</th><th class='px-4 py-2'>收益率</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td class='border px-4 py-2'>华夏成长混合</td><td class='border px-4 py-2'>1.235</td><td class='border px-4 py-2'>125.8</td><td class='border px-4 py-2'>5.7%</td></tr><tr><td class='border px-4 py-2'>易方达蓝筹精选</td><td class='border px-4 py-2'>2.418</td><td class='border px-4 py-2'>328.5</td><td class='border px-4 py-2'>8.3%</td></tr><tr><td class='border px-4 py-2'>嘉实新兴产业</td><td class='border px-4 py-2'>1.892</td><td class='border px-4 py-2'>89.3</td><td class='border px-4 py-2'>4.2%</td></tr><tr><td class='border px-4 py-2'>富国天惠成长</td><td class='border px-4 py-2'>3.156</td><td class='border px-4 py-2'>215.7</td><td class='border px-4 py-2'>9.6%</td></tr><tr><td class='border px-4 py-2'>景顺长城鼎益</td><td class='border px-4 py-2'>2.734</td><td class='border px-4 py-2'>178.2</td><td class='border px-4 py-2'>6.7%</td></tr><tr><td class='border px-4 py-2'>汇添富价值精选</td><td class='border px-4 py-2'>1.978</td><td class='border px-4 py-2'>142.6</td><td class='border px-4 py-2'>7.4%</td></tr><tr><td class='border px-4 py-2'>广发稳健增长</td><td class='border px-4 py-2'>1.543</td><td class='border px-4 py-2'>95.4</td><td class='border px-4 py-2'>5.1%</td></tr><tr><td class='border px-4 py-2'>中欧医疗健康</td><td class='border px-4 py-2'>2.891</td><td class='border px-4 py-2'>267.9</td><td class='border px-4 py-2'>8.8%</td></tr>
                </tbody>
            </table>
        </div>
        
            </section>

            <section class="card">
                <h2 class="text-2xl font-semibold mb-4">数据可视化</h2>
                <div id="data-chart" class="chart-container"></div>
            </section>

            <section class="card">
                <h2 class="text-2xl font-semibold mb-4">分析摘要</h2>
                <div class="prose max-w-none">
                    <p>本报告展示了基金相关数据的可视化分析结果。通过图表和表格的形式，可以更直观地了解数据的分布和趋势。</p>
                    <p>主要发现：</p>
                    <ul class="list-disc pl-5 space-y-2">
                        <li>数据完整性：共分析 8 条记录</li>
                        <li>数据字段：包含 4 个字段</li>
                        <li>可视化展示：通过ECharts图表展示关键数据指标</li>
                    </ul>
                </div>
            </section>
        </main>

        <footer class="footer">
            <p>Created by Autobots</p>
            <p class="text-sm mt-1">页面内容均由 AI 生成，仅供参考</p>
        </footer>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 图表配置
            const chartOptions = {
  "title": {
    "text": "数据可视化图表"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "legend": {
    "data": [
      "净值",
      "规模(亿元)",
      "收益率"
    ]
  },
  "xAxis": {
    "type": "category",
    "data": [
      "华夏成长混合",
      "易方达蓝筹精选",
      "嘉实新兴产业",
      "富国天惠成长",
      "景顺长城鼎益",
      "汇添富价值精选",
      "广发稳健增长",
      "中欧医疗健康"
    ],
    "name": "基金名称"
  },
  "yAxis": {
    "type": "value"
  },
  "series": [
    {
      "name": "净值",
      "type": "bar",
      "data": [
        1.235,
        2.418,
        1.892,
        3.156,
        2.734,
        1.978,
        1.543,
        2.891
      ],
      "itemStyle": {
        "color": "#5470c6"
      }
    },
    {
      "name": "规模(亿元)",
      "type": "bar",
      "data": [
        125.8,
        328.5,
        89.3,
        215.7,
        178.2,
        142.6,
        95.4,
        267.9
      ],
      "itemStyle": {
        "color": "#91cc75"
      }
    },
    {
      "name": "收益率",
      "type": "bar",
      "data": [
        0.057,
        0.083,
        0.042,
        0.096,
        0.067,
        0.07400000000000001,
        0.051,
        0.08800000000000001
      ],
      "itemStyle": {
        "color": "#fac858"
      },
      "label": {
        "show": true,
        "position": "top",
        "formatter": "{value}"
      }
    }
  ]
};

            // 百分比字段列表
            const percentageFields = ["收益率"];

            // 重新创建valueFormatter函数
            if (chartOptions && chartOptions.tooltip) {
                chartOptions.tooltip.valueFormatter = function (value, seriesName) {
                    try {
                        // 检查是否为百分比字段
                        if (percentageFields.includes(seriesName)) {
                            // 对于百分比数据
                            if (Math.abs(value) < 0.01) {
                                const roundedValue = Math.round(value * 1000000) / 1000000;
                                return (roundedValue * 100).toFixed(4) + '%';
                            } else {
                                const roundedValue = Math.round(value * 10000) / 10000;
                                return (roundedValue * 100).toFixed(2) + '%';
                            }
                        } else {
                            // 对于非百分比字段
                            if (Number.isInteger(value)) {
                                return value.toString();
                            } else {
                                const strValue = value.toString();
                                if (strValue.includes('.')) {
                                    const decimalPart = strValue.split('.')[1];
                                    if (decimalPart.length > 6) {
                                        return value.toFixed(6);
                                    } else {
                                        return strValue;
                                    }
                                } else {
                                    return strValue;
                                }
                            }
                        }
                    } catch (e) {
                        return value !== undefined ? value.toString() : '';
                    }
                };
            }

            // 初始化图表
            const chartElement = document.getElementById('data-chart');
            if (chartElement && chartOptions && Object.keys(chartOptions).length > 0) {
                const chart = echarts.init(chartElement);
                chart.setOption(chartOptions);

                // 窗口大小改变时重置图表大小
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            } else {
                console.log("图表配置为空或图表容器未找到");
                if (chartElement) {
                    chartElement.innerHTML = '<p class="text-center text-gray-500">暂无图表数据</p>';
                }
            }
        });
    </script>
</body>
</html>